<template>
  <el-card shadow="never">
    <div style="width: 400px;">
      <SubmitForm :form-list="formList" :rule-form="ruleForm">
        <template #secretKey>
<!--          默认掩藏，提示输入谷歌验证码查看 -->
          <div v-if="isGogleCode" :style="{
            color: '#00000040',
                width: '100%',
                wordBreak: 'break-all',
                whiteSpace: 'normal',
                overflow: 'hidden',
                lineHeight: '24px',
          }">{{ ruleForm.secretKey }}</div>
          <div :style="{
            color: '#00000040',
                width: '100%',
                wordBreak: 'break-all',
                whiteSpace: 'normal',
                overflow: 'hidden',
                lineHeight: '24px',
          }" v-else>***************************************
            <el-button type="text" @click="openCode">查看</el-button>

          </div>
        </template>
      </SubmitForm>
    </div>
  </el-card>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      isGogleCode: false,
      formList: [
          // 接口地址、应用信息、应用ID - appID 、通道ID - txChannel、虚拟账号、平台公钥(验签)、代付设置、商户公钥(加签)、代付IP
          {
            label: '接口地址',
            prop: 'apiUrl',
            placeholder: '请输入接口地址',
          },
          {
            label: '应用信息',
            name: 'title'
          },
          {
            label: '账户信息',
            prop: 'accountId',
          },
          {
            label: '产品代码',
            prop: 'productCode',
            placeholder: '请输入产品代码',
          },
          {
            label: '测试账号',
            prop: 'testAccount',
          },
          {
            label: '商户密钥',
            prop: 'secretKey',
            slot: true
          },
          {
            label: '代付设置',
            name: 'title'
          },
        {
          label: '代付IP',
          prop: 'paymentIP',
          placeholder: '多个IP以#隔开',
          name: 'input',
          type: 'textarea',
          rules: [
            {required: true, message: '请输入代付IP', trigger: 'blur'}
          ]
        }
      ],
      ruleForm: {
        /**
         * 编写测试数据
         */
        apiUrl: 'http://api.abc.com',
        accountId: '123456',
        productCode: '123456',
        testAccount: '123456',
        secretKey: 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC/wBWJqXJrLtQOyf7vcd3KFQqV/U0zuS0M8vjfbqCjloNHctbRB1Nyc2mrVYSHAaWp4M4Wmn5JpC0BRX1rde6yxC21BgwAmZSc3kIc7Ks+qjsbGsfy0SjYyeHdb4+G49UCz5XuRQpGfFuIwgUuu8z8SqEjpDFffhQKcsBGVkx6EwIDAQAB',
      }
    }
  },
  methods: {
    openCode() {
      this.$prompt('请输入谷歌验证码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\d/,
        inputErrorMessage: '谷歌验证码不能为空'
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '你的谷歌验证码是: ' + value
        });
        this.isGogleCode = false
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    }
  }
}
</script>
<style scoped lang="scss">

</style>
